<template>
<view class="container">
	<!-- 搜索历史 -->
	<view class="history">
		<view class="section-header">
			<view class="section-title">搜索历史</view>
			<view class="section-suffix" v-if="history.length">
				<text class="iconfont icon-close-circle"
					style="font-size: 20px;"
					@click="onClear">
				</text>
			</view>
		</view>
		<view v-if="history.length"
			class="section-body">
			<view class="history-item"
				v-for="(item, index) in history"
				:key="index"
				@click="onHistory(item)">{{ item }}</view>
		</view>
		<view v-else class="empty-text sec-top">还没有搜索历史～</view>
	</view>
	<!-- 搜索结果 v-else -->
	<view class="history">
		<uni-list :border="false">
			<subject-card v-for="(item, index) in list"
				:key="index + item.id"
				:item="item"
				@detail="() => onItemClick('subject', item)"
				@book="() => onBookClick(item)">
			</subject-card>
		</uni-list>
		<view v-show="showText" class="empty-text sec-top">{{ text }}</view>
	</view>
</view>
</template>

<script>
import { getCoursesByTitle } from '@/api/index.js';
import SubjectCard from './subject-card.vue';
export default {
	components: {
		SubjectCard
	},
	data() {
		return {
			history: [],
			list: [],
			keyword: '',
			offset: 0,
			limit: 20,
			showText: false,
			text: '加载中...',
			noMore: false
		}
	},
	onShow() {
		const token = uni.getStorageSync('X-Auth-Token');
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
		this.history = uni.getStorageSync('search:history');
		this.reset();
	},
	methods: {
		reset() {
			this.list = [];
			this.offset = 0;
			this.limit = 20;
			this.noMore = false;
			this.showText = false;
			this.text = '加载中...';
		},
		onHistory(keyword) {
			// #ifdef APP-PLUS
			let currentWebview = page.$getAppWebview();
			currentWebview.setTitleNViewSearchInputText(keyword);
			// #endif
			// #ifndef APP-PLUS
			document.getElementsByClassName('uni-page-head-search-placeholder')[0].innerHTML = '';
			document.getElementsByClassName('uni-input-input')[0].value = keyword;
			// #endif
			this.reset();
			this.getSearch(keyword, this.offset, this.limit);
		},
		onItemClick(type, item) {
			uni.navigateTo({
				url: `/pages/${ type }/detail?id=${ item.id }&from=subject`
			})
		},
		onBookClick(item) {
			console.log('on book click');
		},
		onClear() {
			this.history = this.removeHistory()
		},
		removeHistory() {
			uni.removeStorage({
				key: 'search:history',
				success() {
					console.log('clear success')
				}
			})
			return []
		},
		setHistory(text) {
			let history = uni.getStorageSync('search:history')
			if (!history) history = []
			for(let i = 0; i < history.length; i++) {
				if (history[i] === text) {
					history.splice(i, 1)
					break
				}
			}
			history.unshift(text)
			uni.setStorage({
				key: 'search:history',
				data: history,
				success() {
					console.log('set storage success')
				}
			})
		},
		getSearch(text, offset, limit) {
			this.showText = true;
			getCoursesByTitle({
				title: text,
				offset: offset,
				limit: limit
			}).then(res => {
				let total = res.total || 0;
				if (total <= (offset + 1) * limit) {
					this.noMore = true;
					this.text = '已经到底啦～';
				}
				this.list = this.list.concat(res.list || []);
			})
		}
	},
	// 下拉刷新
	onReachBottom() {
		if (!this.noMore) {
			this.offset = this.offset + 1;
			this.getSearch(this.keyword, this.offset, this.limit);
		}
	},
	// 搜索框
	onNavigationBarSearchInputChanged(e) {},
	onNavigationBarSearchInputConfirmed(e) {
		let keyword = e.text
		if (!keyword) {
			return
		}
		else {
			this.setHistory(keyword);
			this.history = uni.getStorageSync('search:history');
			this.reset();
			this.keyword = keyword;
			this.getSearch(keyword, this.offset, this.limit);
		}
	}
}
</script>
